<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>Title</title>
        </head>
        <body>
                <div th:replace="common/top"></div>

                <div id="Content">
<!--                        <ul class="messages">-->
<!--                                <li>${sessionScope.messageSignOn}</li>-->
<!--                        </ul>-->

                        <div id="Catalog">
                                <form action="/account/signonByCode" method="post">
                                        <p>请输入您的手机号和验证码</p>
                                        <p>
                                                手机号:<input type="text" name="memPhone" id="memPhone" placeholder="请输入手机号"/><br/>
                                                验证码:<input type="text" name="code" placeholder="请输入验证码"/><br/>


                                                <!--                                                <a th:href="@{/signon/sendCode(memPhone=${memPhone})}">获得验证码</a>-->


                                                <button type="button" onclick="sendCode()" id="sendBtn">
                                                        发送验证码
                                                </button>

                                                <!--                                                VerificationCode:<input type="text" name="vCode" size="5"-->
                                                <!--                                                                        maxlength="4"/>-->
                                                <!--                                                <a href="signOn"><img border="0" src="verificationCode"-->
                                                <!--                                                                      name="checkcode"></a>-->
                                        </p>
                                        <div class="col-8">
                                                <font color="red" style="margin-left: 3px"
                                                      th:text="${message}">message</font>
                                        </div>
                                        <input type="submit" name="signon" value="Login"/>
                                </form>
                                Need a user name and password?
                                <!--newAccountForm-->
                                <a href="/account/goToRegister">Register Now!</a>
                        </div>

                </div>


                <script>

                    function sendCode() {
                        // alert("进入函数");

                        var memPhone = $("#memPhone").val();

                        // alert(memPhone);

                        if (memPhone == '' || memPhone.length != 11) {
                            alert("请输入正确的手机号！");
                            return;
                        } else {
                            $.ajax({
                                type: 'get',
                                url: '/signon/sendCode',
                                data: {
                                    memPhone: memPhone,
                                },
                                dataType: 'json',
                                success: function (data) {
                                    if (true) {

                                        timer();
                                    } else {
                                        alert("获取验证码失败");
                                    }
                                },
                                error: function (data) {
                                   alert('连接超时！');
                                },
                            });
                        }
                    }

                    var wait = 60;

                    //倒计时
                    function timer() {
                        if (wait == 0) {
                            $("#sendBtn").val("获取验证码");
                            $("#sendBtn").removeAttr("disabled");
                            $("#sendBtn").css("border-color", "1e9fff").css("background", "#ffffff").css("cursor", "pointer");
                            wait = 60;
                        } else {
                            $("#sendBtn").attr("disabled", "true");
                            // $("#sendBtn").css("border-color", "fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");

                            $("#sendBtn").text(wait + "秒后重发");
                            wait--;
                            setTimeout(function () {
                                timer()
                            }, 1000);
                        }
                    }

                </script>

                <div th:replace="common/bottom"></div>

        </body>
</html>